<template>
  <div class="app-container">
   <el-row>
  <el-col > 

    <el-button icon="el-icon-circle-plus"  @click="showAddDialog" type="primary" size="small">添加</el-button>

  <el-table
  :data="tableData"
  border
  style="width: 100%; margin-top: 8px; line-height: 50px;">
  <el-table-column
    prop="id"
    label="ID"
    width="50">
  </el-table-column>
  <el-table-column
    prop="name"
    label="名称"
  >
  </el-table-column>
  <el-table-column
    prop="description"
    label="描述"
   >
  </el-table-column>
  <el-table-column
    prop="unit"
    label="单位"
    width="180">
  </el-table-column>
  <el-table-column
    prop="standard"
    label="标准"
    width="50">
  </el-table-column>
  <el-table-column
    label="操作">
    <template slot-scope="scope">

          <el-button @click="editUser(scope.row.id)" type="info" icon="el-icon-star-off" size="mini">编辑</el-button>
          <el-button @click="delUser(scope.row.id)" type="danger" icon="el-icon-delete" size="mini">删除</el-button>

        </template>
  </el-table-column>
</el-table>

<add-spec-dialog @refresh="refresh" ref="addDialog"></add-spec-dialog>
<el-pagination
style="margin-top: 12px;"
:key="abc"
  background
  layout="prev, pager, next"
  :page-size="5"
  :current-page="current"
   @current-change="goto"
  :total="total">
</el-pagination>
</el-col>
<router-view ></router-view>
</el-row>
</div>
</template>

<script>
import AddSpecDialog from '@/views/spec-key/components/AddSpecDialog.vue'
import http from '@/utils/request.js'

export default {
  components: {
    
    AddSpecDialog
},
  data() {
    return {
      permission: [],
      tableData: [],
      total:0,
      current:1,
      abc: ''
    }
  },
  mounted(){
    this.current = this.$route.query.current
    this.abc = this.$route.query.current
    console.log(this.current)
     this.goto(this.current)
  },
  methods:{
    goto(val=1){
      http.get(`spec-key/pg?page=${val}`).then(res=>{
   this.tableData  =  res.data
  this.total=res.total
  this.current=res.current
  this.abc = res.current
     })
    },
    showAddDialog() {
    this.$refs.addDialog.addUserDialogVisible = true
  },
  editUser(id,current) {
  
    this.$cookies.set('specKeyId', id)
    this.$router.push({
          path: './spec-value',
          query: {id: id ,current:this.current}
        })
        console.log(this.current)
  },
  async delUser(id) {
    try {
      await this.$confirm('你确定要删除这条数据吗?', '警告', {
        confirmButtonText: 'yes',
        cancelButtonText: 'no',
        closeOnClickModal: false,
        type: 'success'
      })   
      await http.delete(`spec-key/${id}`)
      // 删除成功的提示消息
      this.$message({ message: '删除成功', type: 'success', duration: 1000})
      this.refresh()
    }catch(err) { // 
      console.log(err)
    }
  }, 
  refresh() {
    this.goto(this.current)
  }
  
  }
}
</script>

<style>

</style>